<template>
  <div>
    <div class="navbar">
      <van-nav-bar
        title="我的收藏 "
        @click-left="$router.push('/mine')"
        :border="false"
      >
        <template #left>
          <van-icon name="arrow-left" color="black" size="18px" />
        </template>
      </van-nav-bar>
    </div>
    <van-tabs v-model="active">
      <!-- 第一个标签 -->
      <van-tab>
        <template #title><p>推荐收藏</p></template>
        <template #default>
          <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
            <div>
              <van-empty description="推荐收藏为空" v-if="item == ''" />
              <div id="box" v-else>
                <div id="id" v-for="mub in item" :key="mub.pid">
                  <router-link :to="`/redetail/${mub.pid}`">
                    <recommend
                      :age="mub.age"
                      :area="mub.area"
                      :imgname="mub.imgname"
                      :label="mub.label"
                      :sex="mub.sex"
                      :title="mub.title"
                      :time="mub.time"
                    />
                  </router-link>
                  <van-icon
                    name="delete-o"
                    id="aa"
                    @click="submit(mub.uid, mub.title)"
                  />
                </div>

                <div id="btn"></div>
              </div>
            </div>
          </van-pull-refresh>
        </template>
      </van-tab>
      <!-- 第二个标签 -->
      <van-tab to="/mine/collection/all">
        <template #title><p>宠物话题</p></template>
        <template #default>
          <div>
            <router-view />
          </div>
        </template>
      </van-tab>
      <!-- 第三个标签 -->
      <van-tab to="/mine/collection/list">
        <template #title><p>智能穿戴</p></template>
        <template #default>
          <div>
            <router-view /></div
        ></template>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import recommend from "@/components/recommend.vue";
import { getRecom, delRecom } from "@/api/request";
import { Toast } from "vant";
import { Dialog } from "vant";
import { mapState } from "vuex";

export default {
  data() {
    return {
      show: false,
      active: 0,
      numb: [],
      item: [],
      isLoading: false,
      info: "",
      tit: "",
    };
  },
  components: {
    recommend,
  },
  methods: {
    submit(information, tii) {
      this.info = information;
      this.tit = tii;
      console.log(this.info);
      delRecom({ uid: this.info, title: this.tit }).then((res) => {
        console.log(res);
        if (res.data.status == 200) {
          Dialog({ message: "删除成功" });
          this.a();
        }
      });
    },
    a() {
      getRecom({ uname: this.$store.state.user.uname }).then((res) => {
        console.log(res.data);

        this.item = res.data.message;

        console.log(22222);
      });
    },
    onRefresh() {
      setTimeout(() => {
        Toast("刷新成功");
        this.isLoading = false;
        this.a();
      }, 1000);
    },
  },
  mounted() {
    this.a();
  },
  computed: {
    //mapState将开放vuex中保存的user对象到当前组件的计算属性中
    //这样，在当前组件内部,就可以直接使用user来访问vuex中的user
    ...mapState(["user"]),
  },
};
</script>

<style lang="scss" scoped>
*[data-v-cd1f4c60] {
  font-size: 14px;
  color: black;
}
.van-nav-bar {
  ::v-deep .van-icon {
    color: black;
  }
  ::v-deep .van-nav-bar__title {
    font-weight: bold;
    font-family: "黑体";
  }
}
::v-deep .van-tabs__line {
  width: 50px;
  height: 2px;
  margin-bottom: 8px;
}
#box {
  height: calc(100% - 94px);
  display: flex;
  flex-wrap: wrap;
  text-align: left;
  margin-left: 6px;
}

* {
  box-sizing: border-box;
  color: #333;
}
#id {
  margin: 0 8px;
  > #aa {
    font-size: 24px;
    position: relative;
    bottom: 80px;
    left: 120px;
    color: #fdd245;
  }
}
</style>